import React, {FC, useCallback, useEffect, useState} from 'react';
import "./index.less";
import {Button, Space, Tabs} from "antd";
import HxSearch from "@/components/HxSearch";
import HxIcon from "@/components/HxIcon";
import {history} from "@@/core/history";
import querystring from "query-string";
import {useControllableValue} from "ahooks";
import {FormattedMessage} from "@@/exports";
import {Link} from "umi";

interface BizSearchBarProps {
  activeKey?: string;
  onActiveKeyChange?: (val: string) => void;

  searchText?: string;
  onSearchTextChange?: (val: string) => void;
  onSearchTextSubmit?: (val: string, searchType: BizSearchType) => void;

  showBizSearchBarExtra?: boolean;
  showArticleAdvSearch?: boolean;
}

export type BizSearchType = {
  key: string;
  path: string;
  additional?: {
    [key: string]: any;
  }
};
export const searchTypeMap: Record<string, BizSearchType> = {
  "search.article": {key: "search.article", path: "/search/article"},
  "search.journal": {key: "search.journal", path: "/search/journal"},
  "search.consensus": {key: "search.consensus", path: "/search/consensus"},
  "search.guide": {key: "search.guide", path: "/search/guide"},
  "search.chart": {key: "search.chart", path: "/search/chart"},
  "search.video": {key: "search.video", path: "/search/video"},
  "search.expert": {key: "search.expert", path: "/search/expert"},
};

export const searchTypes = Object.values(searchTypeMap);

const BizSearchBar: FC<BizSearchBarProps> = (props) => {
  const {showBizSearchBarExtra = true, onSearchTextSubmit, showArticleAdvSearch=true} = props;


  const [searchText, onSearchTextChange] = useControllableValue<string>(props, {
    valuePropName: 'searchText',
    trigger: "onSearchTextChange"
  });

  const [activeKey, onActiveKeyChange] = useControllableValue<string>(props, {
    valuePropName: 'activeKey',
    trigger: "onActiveKeyChange"
  });

  const handleSearchTextSubmit = useCallback((val: string, searchType: BizSearchType) => {
    if (onSearchTextSubmit) {
      onSearchTextSubmit(val, searchType)
    } else {
      history.push({
        pathname: `${searchType.path}`,
        search: querystring.stringify({
          searchText: val,
        }),
      });
    }

  }, []);


  return (
    <div className={"biz-search-bar"}>
      <Tabs
        type="card"
        activeKey={activeKey}
        onChange={onActiveKeyChange}
        items={searchTypes.map((item, index) => {
          return {
            label: <FormattedMessage id={`${item.key}.text`}/>,
            key: `${item.key}`,
            children: (
              <HxSearch searchType={item}
                        value={searchText}
                        onValueChange={onSearchTextChange}
                        onSubmit={handleSearchTextSubmit}
                        extras={
                          (showArticleAdvSearch && !showBizSearchBarExtra && item.key === "search.article") && (
                            <Space.Compact>
                              <Button size={"large"} type="default"
                                      onClick={() => {
                                        history.push({
                                          pathname: "/search-adv",
                                        });
                                      }}>
                                <FormattedMessage id="text.adv-search"/>
                              </Button>
                            </Space.Compact>
                          )
                        }
              />
            ),
          }
        })}
      />
      {
        showBizSearchBarExtra && (
          <div className={"biz-search-bar-extra"}>
            <a className={"bsbe-btn material-library-btn"} href={"https://one.hxyx.com/admin/material"} target={"_blank"}>
              <HxIcon type="hxicon-sucaiku"/> <FormattedMessage id="text.material-library"/>
            </a>
            <Link to={"/search-adv"} className={"bsbe-btn advanced-search-btn"}><HxIcon type="hxicon-gaojisousuo"/>
              <FormattedMessage id="text.adv-search"/>
            </Link>
          </div>
        )
      }

    </div>
  );
};

export default BizSearchBar;
